<template>
  <div class="app-container">
    <div v-if="needSecurity">
      <ul style="line-height: 2em;list-style-type: none">
        <li>用户名: {{ name }}</li>
        <li>角色: {{ roles }}</li>
        <li>组织: {{ user.groups }}</li>
        <li>其它信息: 暂无(取自 Profile 类)</li>
      </ul>
    </div>
    <div v-else>超级用户</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import security from '@/api/security'

export default {
  name: 'Profile',
  data() {
    return {
      user: {}
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles',
      'needSecurity'
    ])
  },
  created() {
    if (this.needSecurity) {
      security.profile().then(res => {
        this.user = res.data
      })
    }
  },
  methods: {

  }
}
</script>
